<div class="empty-state bg-white tiled" ng-if="!$ctrl.loading && $ctrl.shouldShowOnboarding()">
    <div class="empty-state__summary">
        <h4 ng-if="$ctrl.title">{{$ctrl.title}}</h4>
        <h2 ng-if="$ctrl.icon">
            <i ng-class="$ctrl.icon" aria-hidden="true"></i>
        </h2>
        <p>{{$ctrl.description}}</p>
    </div>
    <div class="empty-state__steps">
        <h4>Let's get started</h4>
        <ol>
            <li ng-class="{done: $ctrl.dataSourceStepCompleted}">
                <a href="data_sources">Connect</a> a Data Source</li>
            <li ng-class="{done: $ctrl.queryStepCompleted}">
                <a href="queries/new">Create</a> your first Query</li>
            <li ng-if="$ctrl.showAlertStep" ng-class="{done: $ctrl.alertStepCompleted}">
                <a href="alerts/new">Create</a> your first Alert</li>
            <li ng-if="$ctrl.showDashboardStep" ng-class="{done: $ctrl.dashboardStepCompleted}">
                <a ng-click="$ctrl.newDashboard()">Create</a> your first Dashboard</li>
            <li ng-if="$ctrl.showInviteStep"  ng-class="{done: $ctrl.inviteStepCompleted}">
                <a href="users/new">Invite</a> your team members</li>
        </ol>
        <p>Need more support?
            <a href="{{$ctrl.helpLink}}" target="_blank">See our Help
                <i class="fa fa-external-link" aria-hidden="true"></i>
            </a>
        </p>
    </div>
</div>